@import "../../../../css/mobile/components/normalize";
@import "../../../../css/mobile/components/font";

.container {
	height: 100vh;
	background: url("../img/bg.png");
	background-size: 100% 604px;
	background-repeat: no-repeat;
	position: relative;

	.text {
		position: absolute;
		top: 306px;
		left: 165px;
		width: 420px;
		height: 80px;
		font-size: 28px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 40px;
		text-align: center;

		span {
			color: rgba(248, 231, 28, 1);
		}
	}

	.qrcode {
		width: 378px;
		height: 378px;
		background-color: #ffffff;
		border: 16px solid #ffffff;
		border-radius: 12px;
		position: absolute;
		top: 367px;
		left: 186px;
		box-sizing: border-box;
	}

	.footerRight {
		width: 100%;
		height: 159px;
		position: absolute;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
	}

	.qrcode-text {
		width: 100%;
		height: 36px;
		font-size: 26px;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		color: rgba(63, 63, 63, 1);
		line-height: 36px;
		text-align: center;
		position: absolute;
		top: 775px;
	}

	.qrcode-text2 {
		width: 100%;
		height: 36px;
		line-height: 36px;
		text-align: center;
		position: absolute;
		top: 824px;
		font-size: 26px;
		font-family: PingFangSC;
		font-weight: 300;
		color: #666666;
	}

	.footer {
		width: 100%;
		height: 40px;
		font-size: 28px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.3);
		line-height: 40px;
		text-align: center;
		position: absolute;
		bottom: 40px;
	}

	.mask {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.form {
			.form-group {
				width: 100%;
				height: 150px;
				position: relative;
				font-size: 0;

				.input-label {
					width: 190px;
					height: 92px;
					line-height: 92px;
					font-size: 32px;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					color: rgba(75, 79, 87, 1);
					display: inline-block;
					text-align: center;
					user-select: none;
					position: absolute;
					left: 0;
					bottom: 4px;
				}

				input {
					&[type="text"],
					&[type="password"] {
						width: 480px;
						height: 92px;
						line-height: normal;
						font-size: 32px;
						font-family: VarelaRound-Regular;
						font-weight: 400;
						padding-left: 32px;
						outline: none;
						color: rgba(75, 79, 87, 1);
						background: rgba(255, 255, 255, 1);
						border: 0;
						border-radius: 0;
						border-bottom: 4px solid rgba(230, 245, 250, 1);
						appearance: none;
						display: inline-block;
						box-sizing: border-box;
						position: absolute;
						left: 192px;
						bottom: 0;

						&::placeholder {
							font-weight: 300;
							font-family: PingFangSC-Light;
							color: rgba(105, 109, 118, 0.3);
						}
					}
				}
			}
			.nickname-group {
				height: 114px;

				.random {
					width: 106px;
					height: 56px;
					font-size: 28px;
					line-height: 56px;
					background: rgba(50, 205, 255, 1);
					border-radius: 10px;
					font-family: PingFangSC-Semibold;
					font-weight: 600;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					display: inline-block;
					position: absolute;
					bottom: 18px;
					right: 80px;
				}
			}
			.age-group {
				.age {
					position: fixed;
					top: -999px;
				}
				label[for="birthday"] {
					width: 480px;
					height: 92px;
					line-height: 92px;
					font-size: 32px;
					font-weight: 300;
					font-family: PingFangSC-Light;
					color: rgba(105, 109, 118, 0.3);
					background: rgba(255, 255, 255, 1);
					border: 0;
					border-radius: 0;
					border-bottom: 4px solid rgba(230, 245, 250, 1);
					outline: none;
					appearance: none;
					text-align: left;
					text-indent: 32px;

					position: absolute;
					left: 192px;
					bottom: 0;
				}
			}
			.sex-group {
				height: 160px;

				label[for="sex"] {
					bottom: 14px;
				}

				label[for="boy"],
				label[for="girl"] {
					display: inline-block;
					width: 230px;
					height: 112px;
					border-radius: 56px;
					border: 0;
					position: absolute;
					bottom: 0;
					line-height: 112px;
					text-align: left;
					text-indent: 136px;
					font-size: 28px;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					color: rgba(223, 223, 225, 1);
					background-color: rgba(216, 216, 216, 0.2);
					background-size: 108px 96px;
					background-repeat: no-repeat;
					background-position: 16px 8px;

					&[for="boy"] {
						left: 192px;
						background-image: url(../icon/boy2.png);
					}
					&[for="girl"] {
						left: 440px;
						background-image: url(../icon/girl2.png);
					}
				}

				input[name="sex"]:checked + label {
					color: rgba(50, 205, 255, 1);
					background-color: rgba(50, 205, 255, 0.2);

					&[for="boy"] {
						background-image: url(../icon/boy1.png);
					}
					&[for="girl"] {
						background-image: url(../icon/girl1.png);
					}
				}
			}
			.pwd-group {
				height: 134px;
			}
		}

		.submit {
			width: 670px;
			height: 96px;
			background: rgba(50, 205, 255, 1);
			border-radius: 16px;
			font-size: 32px;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 96px;
			text-align: center;
			position: absolute;
			left: 40px;
			bottom: 32px;
		}

		%title {
			height: 100px;
			font-size: 32px;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(40, 43, 49, 1);
			line-height: 100px;
			background: rgba(255, 255, 255, 1);
			border-bottom: 2px solid rgba(231, 232, 234, 1);
			text-align: center;
		}

		.user-info {
			width: 100%;
			background: #ffffff;
			position: absolute;
			left: 0;
			bottom: 0;
			top: 350px;

			.title {
				@extend %title;
			}
		}

		.class-time {
			width: 100%;
			top: 350px;
			background: #ffffff;
			position: absolute;
			left: 0;
			bottom: 0;

			.title {
				@extend %title;
				border: 0;
			}

			.weeken {
				height: 80px;
				font-size: 0;
				text-align: center;

				label {
					display: inline-block;
					width: 50%;
					height: 78px;
					line-height: 78px;
					font-size: 32px;
					font-family: VarelaRound-Regular;
					font-weight: 400;
					color: rgba(40, 43, 49, 1);
					text-align: center;
					border-bottom: 2px solid rgba(231, 232, 234, 1);
					box-sizing: border-box;
				}

				input[name="weeken"]:checked + label {
					color: rgba(50, 205, 255, 1);
					border-bottom: 4px solid rgba(50, 205, 255, 1);
				}
			}

			.frequency {
				padding: 30px 0 27px 0;
				margin: 0 40px;
				border-bottom: 2px solid rgba(231, 232, 234, 1);
				.class-frequency-title {
					text-align: center;
					height: 40px;
					font-size: 28px;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					color: rgba(75, 79, 87, 1);
					line-height: 40px;
				}
				.class-frequency-list {
					margin-top: 10px;
					font-size: 0;
					text-align: center;
					display: flex;
					flex-wrap: wrap;

					label {
						margin: 10px 36px 10px 0;
						width: 140px;
						height: 68px;
						line-height: 68px;
						border-radius: 34px;
						font-size: 28px;
						background: rgba(216, 216, 216, 0.2);
						font-family: PingFangSC-Regular;
						font-weight: 400;
						color: rgba(210, 211, 213, 1);
						display: inline-block;
					}

					input[name="frequency"]:checked + label {
						color: rgba(50, 205, 255, 1);
						background-color: rgba(50, 205, 255, 0.1);
					}
				}
			}
			.time {
				padding: 35px 0 20px 0;
				margin: 0 40px;
				.class-time-title {
					text-align: center;
					height: 40px;
					font-size: 28px;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					color: rgba(75, 79, 87, 1);
					line-height: 40px;
				}
				.class-time-title2 {
					margin-top: 2px;
					text-align: center;
					height: 36px;
					font-size: 26px;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					color: rgba(181, 184, 194, 1);
					line-height: 36px;
				}
				.class-time-list {
					margin-top: 14px;
					font-size: 0;
					text-align: center;
					display: flex;
					flex-wrap: wrap;

					label {
						margin: 10px 17.5px 10px 0;
						width: 120px;
						height: 68px;
						background: rgba(216, 216, 216, 0.2);
						border-radius: 34px;
						font-size: 28px;
						font-family: VarelaRound-Regular;
						font-weight: 400;
						color: rgba(210, 211, 213, 1);
						line-height: 68px;
						display: inline-block;
					}

					input[name="time"]:checked + label {
						color: rgba(50, 205, 255, 1);
						background-color: rgba(50, 205, 255, 0.1);
					}
				}
			}
		}

		.survey {
			width: 100%;
			top: 350px;
			background: #ffffff;
			position: absolute;
			left: 0;
			bottom: 0;

			.title {
				@extend %title;
			}

			.in-school {
				padding: 40px 0;
				margin: 0 40px;
				border-bottom: 2px solid rgba(231, 232, 234, 1);
				.in-school-title {
					text-align: center;
					height: 40px;
					font-size: 28px;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					color: rgba(75, 79, 87, 1);
					line-height: 40px;
				}
				.in-school-list {
					font-size: 0;

					label {
						margin: 8px 18px 8px 0;
						width: 154px;
						height: 68px;
						background: rgba(216, 216, 216, 0.2);
						border-radius: 34px;
						font-size: 28px;
						font-family: VarelaRound-Regular;
						font-weight: 400;
						color: rgba(210, 211, 213, 1);
						line-height: 68px;
						display: inline-block;
						text-align: center;
					}

					input[name="in-school"]:checked + label {
						color: rgba(50, 205, 255, 1);
						background-color: rgba(50, 205, 255, 0.1);
					}
				}
			}
			.out-school {
				padding: 40px 0;
				margin: 0 40px;
				.out-school-title {
					text-align: center;
					height: 40px;
					font-size: 28px;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					color: rgba(75, 79, 87, 1);
					line-height: 40px;
				}
				.out-school-list {
					font-size: 0;

					label {
						margin: 8px 18px 8px 0;
						width: 154px;
						height: 68px;
						background: rgba(216, 216, 216, 0.2);
						border-radius: 34px;
						font-size: 28px;
						font-family: VarelaRound-Regular;
						font-weight: 400;
						color: rgba(210, 211, 213, 1);
						line-height: 68px;
						display: inline-block;
						text-align: center;
					}

					input[name="out-school"]:checked + label {
						color: rgba(50, 205, 255, 1);
						background-color: rgba(50, 205, 255, 0.1);
					}
				}
			}
		}
	}
}
